<script>
import _ from 'lodash'
export default {
  name: 'DebbyTable',
  props: {
    requestFun: {
      type: [Promise, Function],
      default: () => new Promise(resolve => resolve([]))
    },

    // 表格列配置 和 element提供的props相同
    column: {
      type: Array,
      default: () => []
    },
    /**
       * 表格配置
       * 接受所有表格配置项 以createElement构建
       */
    tableOptions: {
      type: Object,
      default: () => {
      }
    },
    /**
       * 表格column配置
       * 接受所有表格column配置项 以createElement构建
       */
    tableColumnOptions: {
      type: Object,
      default: () => {
      }
    },
    /**
       * 向父组件提供一个用来处理返回数据的方法
       */
    dealRequestData: {
      type: Function,
      default: data => data
    },

    // 是否需要加载态
    needLoading: {
      type: Boolean,
      default: true
    },
    // 页码配置
    paginationOptions: {
      type: Object,
      default: () => {
      }
    },
    // 是否显示页码
    showPagination: {
      type: Boolean,
      default: true
    },

    // 是否需要重复请求
    needInterval: {
      type: Boolean,
      default: false
    },
    // 间隔时间
    intervalTime: {
      type: Number,
      default: 30000
    },
    /**
     * 过滤条件 overwrite
     */
    filter: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      tableData: [],

      // 默认不需要loading
      loading: false,

      // 分页当前页
      currentPage: 1,

      // 总条数
      count: 0,

      pageSize: 15,

      defaultPaginationOptions: {
        props: {
          background: true,
          layout: 'total, sizes, prev, pager, next, jumper',
          'page-sizes': [10, 15, 20, 30, 40, 50, 100]
        }
      },
      // 默认el-table-column配置
      defaultTableColumnOptions: {
        headerAlign: 'left',
        align: 'left',
        'show-overflow-tooltip': true
      },

      interval: null
    }
  },
  mounted() {
    this.getData()
    if (this.needInterval) {
      this.interval = setInterval(() => {
        this.getData()
      }, this.intervalTime)
    }
  },
  beforeDestroy() {
    this.interval && clearInterval(this.interval)
  },
  methods: {
    getData: _.debounce(function() {
      this.requestTableData()
    }, 100),
    requestTableData() {
      const _this = this
      _this.loading = _this.needLoading
      _this.requestFun({}, { params: {
        ...this.filter,
        pageSize: _this.pageSize,
        pageNo: _this.currentPage
      }}).then(res => {
        const { data, count, page } = _this.dealRequestData(res)
        _this.tableData = data
        _this.count = count
        _this.currentPage = page
        _this.loading = false
      }).catch(() => {
        _this.loading = false
      })
    }
  },
  render(createElement) {
    const _this = this
    const tableOptions = _this.tableOptions || {}
    const divHtml = []
    const Table = createElement('el-table', {
      ...tableOptions,
      props: {
        ...(tableOptions.props || {}),
        data: _this.tableData,
        border: true
      }
    }, _this.column.map((item) => {
      const scopedSlots = {}
      if (item.render && typeof item.render === 'function') {
        scopedSlots.default = (props) => item.render(createElement, props)
      }
      return createElement('el-table-column', {
        props: {
          width: item._type && item._type === 'date' ? '150px' : undefined,
          ..._this.defaultTableColumnOptions,
          ...item
        },
        scopedSlots
      })
    }))
    divHtml.push(Table)

    if (_this.showPagination) {
      // 分页
      const paginationOptions = _this.paginationOptions || {}
      const Pagination = createElement('el-pagination', {
        ...paginationOptions,
        props: Object.assign({
          total: _this.count,
          currentPage: _this.currentPage,
          pageSize: _this.pageSize
        },
        _this.defaultPaginationOptions.props,
        paginationOptions.props || {}),
        style: {
          marginTop: '20px'
        },
        on: {
          'size-change': (value) => {
            _this.pageSize = value
            _this.getData()
          },
          'current-change': value => {
            _this.currentPage = value
            _this.getData()
          }
        }
      })
      divHtml.push(Pagination)
    }

    return createElement('div', {
      directives: [
        {
          name: 'loading',
          value: _this.loading
        }
      ]
    }, divHtml)
  }
}
</script>

<style scoped lang="scss">
    .el-pagination {
        float: right;
    }
    i {
        font-size: 14px !important;
        cursor: pointer;
        & + i {
              margin-left: 8px !important;
        }
    }
</style>

